<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Title</title>
    <!-- Required meta tags -->
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="width=device-width, 
      user-scalable=no,
      initial-scale=1, shrink-to-fit=no"
    />

    <link
      rel="stylesheet"
      href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
      integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
      crossorigin="anonymous"
    />
    <style>
      html,
      body {
        overflow-x: hidden;
      }
      .table-hover,
      tbody,
      tr:hover {
        border: 1px solid #000;
      }
    </style>
  </head>
  <body>
    <div class="container-fluid p-0">
      <div class="row">
        <div class="col-12 col-lg-4 p-4">
          <input
            class="form-control"
            type="text"
            name="s_name"
            placeholder="姓名"
          />
          <input
            class="form-control mt-2 mb-2"
            type="text"
            name="s_sex"
            placeholder="性别"
          />
          <input
            class="form-control"
            type="text"
            name="s_num"
            placeholder="学号"
          />
          <button
            type="button"
            id="checkout"
            class="btn btn-primary btn-lg btn-block mt-2"
          >
            查询
          </button>
        </div>
        <div class="col mt-2">
          <table
            class="table table-light table-bordered table-hover text-center"
          >
            <thead class="table-info">
              <tr></tr>
            </thead>
            <tbody></tbody>
          </table>
        </div>
        <br />
      </div>
    </div>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.js"></script>
    <script
      src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
      integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
      crossorigin="anonymous"
    ></script>
    <script
      src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
      integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
      crossorigin="anonymous"
    ></script>

    <script>
      $(function () {
        getData();
        $("#checkout").click(function () {
          let name = $("input")[0].value,
            sex = $("input")[1].value,
            num = $("input")[2].value;
          checkout({ name, sex, num });
        });
      });
      function machiData(rawData) {
        rawData = JSON.stringify(rawData);
        rawData = rawData.replace(/s_id/g, "学号");
        rawData = rawData.replace(/s_name/g, "姓名");
        rawData = rawData.replace(/s_sex/g, "性别");
        return JSON.parse(rawData);
      }
      function getData() {
        $.ajax({
          type: "get",
          url: "/index",
          dataType: "json",
          success: function (response) {
            if (response.length > 0) {
              let res = machiData(response);
              initPage(res);
            }
          },
          error: function (err) {
            console.log(err);
          },
        });
      }
      function initPage(res) {
        for (const key in res[0]) {
          $("thead tr").append(`<th>${key}</th>`);
        }
        res.forEach((item, index) => {
          $("tbody").append(
            `<tr><td>${item["学号"]}</td><td>${item["姓名"]}</td><td>${item["性别"]}</td></tr>`
          );
        });
      }
      function checkout({ ...arg }) {
        let { name, sex, num } = arg;
        console.log(arg);
        $.ajax({
          type: "POST", //默认get
          url: "/index/seach", //默认当前页
          contentType: "application/json", //这个属性写了必须把data对象转换为字符串的json
          data: JSON.stringify(arg),
          dataType: "json",
          success: function (response) {
            console.log(response);
            initPage(machiData(response));
          },
          error: function (e) {
            //请求超时回调
            if (e.statusText == "timeout") {
              alert("请求超时");
            }
          },
        });
      }
    </script>
  </body>
</html>
